import { defineComponent, PropType, VNode } from 'vue';
import { useController, useNamespace } from '@ibiz-template/vue3-util';
import './form-tab-panel.scss';
import { IDEFormTabPanel } from '@ibiz/model-core';
import { FormTabPanelController } from './form-tab-panel.controller';
import { FormTabPageController } from '../form-tab-page';

export const FormTabPanel = defineComponent({
  name: 'IBizFormTabPanel',
  props: {
    modelData: {
      type: Object as PropType<IDEFormTabPanel>,
      required: true,
    },
    controller: {
      type: FormTabPanelController,
      required: true,
    },
  },
  setup(props) {
    const ns = useNamespace('form-tab-panel');
    useController(props.controller);

    return {
      ns,
    };
  },
  render() {
    const defaultSlots: VNode[] = this.$slots.default?.() || [];
    return (
      <el-tabs
        class={[
          this.ns.b(),
          this.ns.m(this.modelData.codeName),
          ...this.controller.containerClass,
        ]}
        model-value={this.modelData.deformTabPages?.[0].id}
      >
        {defaultSlots.map(slot => {
          const props = slot.props as IData;
          if (!props || !props.controller) {
            return slot;
          }
          const c = props.controller as FormTabPageController;
          // 不显示且不用保活时直接不绘制
          if (!c.state.visible && !c.state.keepAlive) {
            return null;
          }
          return (
            <el-tab-pane
              class={this.ns.b('tab-item')}
              label={c.model.caption}
              name={c.model.id}
              lazy
            >
              {{
                default: (): VNode => slot,
                label: (): JSX.Element => {
                  return (
                    <span class={c.labelClass}>
                      {c.model.sysImage && <iBizIcon icon={c.model.sysImage} />}
                      {c.model.showCaption && c.model.caption}
                    </span>
                  );
                },
              }}
            </el-tab-pane>
          );
        })}
      </el-tabs>
    );
  },
});
export default FormTabPanel;
